<template>
	<view>
		<view class="my-fixed flex bg-fff padding justify-center">
			<view 
				class="flex align-center" 
				v-for="(item,index) in tabArr"
				@tap="handleTab(item,index)"
			>
				<view class="tab-name">
					{{item.name}}
					<u-badge 
						type="warning" 
						max="99" 
						:value="allNum" 
						absolute 
						:offset="[-8,-13]"
						v-if="index==tabArr.length-1"
					></u-badge>
				</view>
				<view class="margin-lr" v-if="index<tabArr.length-1">
					<u-line  direction="col" length="15"></u-line>
				</view>
				
			</view>
		</view>
		<u-popup :show="show" mode="left"  @close="show=false">
			<view class="pop-cont">
				<view class="" v-for="(item,index) in cfylist" >
					<view @tap="handleCakeList(item.bid)" class="flex padding u-border-bottom">
						<text class="margin-right-xs">{{item.bname}}</text>
						<u-tag type="warning" :text="item.num" shape="circle" size="mini"></u-tag>
					</view> 
					<view  v-if="index==0">
						<view @tap="listShow=!listShow" class="padding u-border-bottom">
							口味筛选
							<text class="iconfont icon-xiala" :class="{rotate:!listShow}"></text>
						</view>
						<view class="cu-list menu padding-left-sm" v-if="listShow">
							<view  @tap="handleCakeList(item.bid,itm.tid,1)" v-for="(itm,idx) in item.list" class="cu-item arrow u-border-bottom">
								{{itm.tname}}
							</view>
						</view>
						<view @tap="sceneShow=!sceneShow" class="padding u-border-bottom">
							场景筛选
							<text class="iconfont icon-xiala" :class="{rotate:!sceneShow}"></text>
						</view>
						<view class="cu-list menu padding-left-sm" v-if="sceneShow">
							<view  @tap="handleCakeList(item.bid,itm.tid,2)" v-for="(itm,idx) in item.scene" class="cu-item arrow u-border-bottom">
								{{itm.tname}}
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"tab-custom",
		data() {
			return {
				tabArr:[
					{name:'分类',bcid:'',target:''},
					{name:'蛋糕',bcid:1,target:'/pages/cake/cake'},
					{name:'面包',bcid:11,target:'/pages/cake/cake'},
					{name:'小食',bcid:6,target:'/pages/cake/cake'},
					{name:'购物车',bcid:'',target:'/pages/cart/cart'}
				],
				show:false,  //控制遮罩显示
				cfylist:[],
				listShow:false,  //口味列表显示控制
				sceneShow:false 
			};
		},
		computed: {
			allNum() {
				return this.$store.getters['cart/allInfo'].allNum 
			}
		},
		created() {
			this.$get('/classes/CakeCfy').then(res=>{
				console.log(res);
				this.cfylist = res.results
			})
		},
		methods: {
			handleTab(item,idx) {  //底部菜单点击
				if(item.bcid){ //触发菜单切换时，修改状态机中的查询条件
					this.$store.commit('condition/setConditionMut',{
						bcid:item.bcid
					})
				}
				if(idx>0){
					uni.navigateTo({
						url:item.target
					})
					return
				}
				this.show = true
			},
			handleCakeList(bcid,tid,type){ //侧边分类点击,tid有可能用来筛选口味、场景
				let obj = {bcid} //大类
				if(type===1){obj.fid = tid} //口味
				if(type===2){obj.sid = tid} //场景
				this.$store.commit('condition/setConditionMut',obj)
				uni.navigateTo({
					url:'/pages/cake/cake'
				})
			}
		},
	}
</script>

<style lang="scss">
.my-fixed{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-shadow: 0 0 20upx 2upx rgba(0,0,0,0.3);
}
.pop-cont{
	width:400upx;
	padding-top: 100upx;
}
.icon-xiala.rotate{
	display: inline-block;
	transform: rotate(180deg);
}
.tab-name{
	position: relative;
}
</style>
